<script setup lang="ts">
import CommonAlbum from '@components/Common/CommonAlbum.vue';
import { MusicList, PageInfo } from '@/type';


const props = defineProps<{
    pageInfo: PageInfo<MusicList>
}>()

</script>

<template>
    <ul class="album-list">
        <li v-for="item in props.pageInfo.list">
            <div class="album-warp">
                <CommonAlbum :title="item.title !== undefined ? item.title : '错误'"
                    :cd-id="item.id !== undefined ? item.id : '错误'" :src="(item.image as string)" :width="120"
                    :height="120" />
            </div>

        </li>

    </ul>
</template>

<style scoped lang="css">
.album-list {
    list-style: none;
    display: grid;
    /* flex-wrap: wrap; */
    margin: 0;
    padding-left: 0;
    grid-template-columns: repeat(6, 140px);
    justify-content: space-between;
}

.album-list li {
    /* padding-left: 32px; */
    padding-bottom: 30px;
}
</style>